<template>
  <div id="user-table" ref="user-table" :style="{ height: usertable + 'px' }">
    <div class="goback" @click="gobackhome">
      <svg
        t="1658455454274"
        style="margin-right: 10px"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="7903"
        id="mx_n_1658455454275"
        width="20"
        height="20"
      >
        <path
          d="M475 276V141.4c-12.1-56.3-58.2-22-58.2-22L96.6 395.9c-70.4 48.9-4.8 85.7-4.8 85.7l315.4 274.1c63.1 46.5 67.9-24.5 67.9-24.5V606.4C795.3 506 926.3 907.5 926.3 907.5c12.1 22 19.4 0 19.4 0C1069.4 305.4 475 276 475 276z"
          p-id="7904"
          data-spm-anchor-id="a313x.7781069.0.i8"
          class=""
          fill="#0f82fb"
        ></path>
      </svg>
      返回
    </div>
    <div id="videobox">
      <div class="box" v-for="(item, index) in datas" :key="index">
        <div class="idbox">
          <div :id="'video_' + index"></div>
        </div>
        <div class="bottommsg">
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.cameraName || '暂无数据'"
            placement="top"
          >
            <div class="videoname">{{ item.cameraName || "暂无数据" }}</div>
          </el-tooltip>
          <div class="dianwei">
            <el-tooltip
              class="item"
              effect="dark"
              :content="`摄像头点位 ${item.cameraPoint || '无'}`"
              placement="top"
            >
              <div class="left">
                {{ `摄像头点位 ${item.cameraPoint || "无"}` }}
              </div>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="`监控方位${item.monitorPosition || '无'}`"
              placement="top"
            >
              <div class="right">
                {{ `监控方位 ${item.monitorPosition || "无"}` }}
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <mugen-scroll
      :handler="loadMore"
      :should-handle="!loading"
      scroll-container="user-table"
    >
    </mugen-scroll>
  </div>
</template>
<script>
import { queryBigMonitorScreenJksbxx } from "./apiindex";
import MugenScroll from "vue-mugen-scroll";
import Hls from "hls.js";
import Dplayer from "dplayer";
export default {
  props: {
    detparams: {
      type: String,
      default: "",
    },
  },
  components: {
    MugenScroll,
  },
  mounted() {
    setTimeout(() => {
      this.usertable = document.getElementById("myvideo").clientHeight / 1.35;
    }, 0);
  },
  methods: {
    loadFn(dom, callback) {
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgb(1, 7, 42,.5)",
      });
      document.body.className = document.body.className.split(" ").pop();
      if (callback) callback(loading);
    },
    loadMore() {
      let that = this;
      if (this.pageNum <= this.countPage) {
        this.loadFn(document.getElementById("videobox"), async (loading) => {
          that.loading = true;
          let parmas = {
            databaseName: that._props.detparams,
            pageNum: that.pageNum,
            pageSize: that.pageSize
          };
          try {
            await queryBigMonitorScreenJksbxx(parmas).then((res) => {
              let data = res.data.data.data || [];
              that.datas = [...that.datas, ...data];
              that.countPage = res.data.data.countPage;
              setTimeout(() => {
                that.datas.map((item, index) => {
                  if (!that.dp[index]) {
                    that.dp[index] = new Dplayer({
                      element: document.getElementById(`video_${index}`),
                      autoplay: false,
                      playbackSpeed: [1],
                      video: {
                        type: "customHls",
                        url: item.liveAddress,
                        pic:item.picUrl=='无'?require("./images/projtcebg.png"):item.picUrl||require("./images/projtcebg.png"),
                        customType: {
                          customHls: function (video, player) {
                            if (that.hls[index]) {
                              that.hls[index].stopLoad();
                              that.hls[index].destory();
                              that.dp[index].destory();
                            }
                            that.hls[index] = new Hls();
                            that.hls[index].loadSource(video.src);
                            that.hls[index].attachMedia(video);
                          },
                        },
                      },
                    });
                  }
                });
                loading.close();
              }, 0);
              that.pageNum++;
              that.loading = false;
            });
          } catch {
            that.loading = false;
            loading.close();
            console.log("加载失败");
          }
        });
      }
    },
    gobackhome() {
      try {
        let that = this;
        this.datas.map((item, index) => {
          that.hls[index].destroy();
          that.hls[index].stopLoad();
          that.dp[index].destroy();
        });
        this.datas = [];
        this.$emit("editiddetal", false);
      } catch {
        this.$emit("editiddetal", false);
      }
    },
  },
  data() {
    return {
      pageNum: 1,
      countPage: 2,
      pageSize: 10,
      datas: [],
      loading: false,
      usertable: 0,
      hls: [],
      dp: [],
    };
  },
  beforeDestroy() {
    try {
      this.datas.map((item, index) => {
        this.hls[index].destroy();
        this.hls[index].stopLoad();
        this.dp[index].destroy();
      });
    } catch {
      this.datas = [];
    }
  },
};
</script>
<style lang="scss" >
.dplayer-full-in-icon {
  display: none !important;
}
#video-container {
  width: 100%;
  .vjs-poster {
    background-size: cover !important;
  }
  .vjs-big-play-button {
    display: none !important;
  }
}
</style>